.vibrate {
  animation-name: beat-cell;
  /*动画名称*/
  animation-duration: 2s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}

.vibrate-0 {
  animation-delay: 0ms;
}
.vibrate-1 {
  animation-delay: 250ms;
}
.vibrate-2 {
  animation-delay: 500ms;
}
.vibrate-3 {
  animation-delay: 750ms;
}
.vibrate-4 {
  animation-delay: 1000ms;
}
.vibrate-5 {
  animation-delay: 1250ms;
}
.vibrate-6 {
  animation-delay: 1500ms;
}
@keyframes beat-cell {
  0% {
    transform: translateX(0px);
  }
  2% {
    transform: translateX(2px);
  }
  4% {
    transform: translateX(-2px);
  }
  6% {
    transform: translateX(2px);
  }
  8% {
    transform: translateX(-2px);
  }
  10% {
    transform: translateX(2px);
  }
  12% {
    transform: translateX(-2px);
  }
  14% {
    transform: translateX(2px);
  }
  16% {
    transform: translateX(-2px);
  }
  18% {
    transform: translateX(2px);
  }
  20% {
    transform: translateX(-2px);
  }
  22% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}

.vibrate-hard {
  animation-name: beat-cell-hard;
  /*动画名称*/
  animation-duration: 2s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}

@keyframes beat-cell-hard {
  0% {
    transform: translateX(0px);
  }
  2% {
    transform: translateX(3px);
  }
  4% {
    transform: translateX(-3px);
  }
  6% {
    transform: translateX(3px);
  }
  8% {
    transform: translateX(-3px);
  }
  10% {
    transform: translateX(3px);
  }
  12% {
    transform: translateX(-3px);
  }
  14% {
    transform: translateX(3px);
  }
  16% {
    transform: translateX(-3px);
  }
  18% {
    transform: translateX(3px);
  }
  20% {
    transform: translateX(-3px);
  }
  22% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}

.vibrate-fast-continue {
  animation-name: beat-cell-fast;
  /*动画名称*/
  animation-duration: 0.75s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}
@keyframes beat-cell-fast {
  0% {
    transform: translateX(0px);
  }
  2% {
    transform: translateX(0px);
  }
  5% {
    transform: translateX(2px);
  }
  10% {
    transform: translateX(-2px);
  }
  15% {
    transform: translateX(2px);
  }
  20% {
    transform: translateX(-2px);
  }
  25% {
    transform: translateX(2px);
  }
  30% {
    transform: translateX(-2px);
  }
  /* 35% {
    transform: translateX(2px);
  }
  40% {
    transform: translateX(-2px);
  }
  45% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(-2px);
  }
  53%, */
  33% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}

.vibrate-fast-hard {
  animation-name: beat-cell-fast-hard;
  /*动画名称*/
  animation-duration: 0.75s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}

.vibrate-fast-hard-once {
  animation-name: beat-cell-fast-hard;
  /*动画名称*/
  animation-duration: 0.75s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  /* animation-iteration-count: infinite; */
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
  transition: all 0.25s ease-in-out;
}

@keyframes beat-cell-fast-hard {
  0% {
    transform: translateX(0px);
  }
  2% {
    transform: translateX(-3px);
  }
  5% {
    transform: translateX(3px);
  }
  10% {
    transform: translateX(-3px);
  }
  15% {
    transform: translateX(3px);
  }
  20% {
    transform: translateX(-3px);
  }
  25% {
    transform: translateX(3px);
  }
  30% {
    transform: translateX(-3px);
  }
  35% {
    transform: translateX(3px);
  }
  40% {
    transform: translateX(-3px);
  }
  45% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
  55% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-3px);
  }
  /* 35% {
    transform: translateX(3px);
  }
  40% {
    transform: translateX(-3px);
  }
  45% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
  53%, */
  63% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}

.vibrate-slight {
  animation-name: beat-cell-slight;
  /*动画名称*/
  animation-duration: 1s;
  /*设置秒数*/
  animation-timing-function: ease;
  /* animation-timing-function: linear; */
  /*速度曲线*/
  animation-iteration-count: infinite;
  /*播放次数*/
  animation-direction: alternate;
  /*逆向播放*/
  animation-play-state: running;
  /*正在运行*/
}

@keyframes beat-cell-slight {
  0% {
    transform: translateX(0px);
  }
  4% {
    transform: translateX(1px);
  }
  8% {
    transform: translateX(-1px);
  }
  12% {
    transform: translateX(1px);
  }
  16% {
    transform: translateX(-1px);
  }
  20% {
    transform: translateX(1px);
  }
  24% {
    transform: translateX(-1px);
  }
  28% {
    transform: translateX(1px);
  }
  32% {
    transform: translateX(-1px);
  }
  36% {
    transform: translateX(1px);
  }
  40% {
    transform: translateX(-1px);
  }
  44% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}
